<!-- 人群分析 -->
<template>
  <div class="crowd">
    <el-row class="headerSelect">
      <el-col :span="10">
        <p>请选择人群：</p>
        <el-select v-model="crowdValue" placeholder="请选择">
          <el-option
            v-for="item in getSelectCrowd"
            :key="item.group_id"
            :label="item.group_name"
            :value="item.group_id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="18">
        <button @click="findAnalyse">查询</button>
      </el-col>
    </el-row>
    <el-row class="wrapper">
      <el-row class="dimensionality">
        <el-col :span="10" class="spansSelect">
          <p>分析维度：</p>
          <el-select multiple v-model="dimensiValue" placeholder="请选择">
            <el-option
              v-for="(item, i) in dimensionality"
              :key="i"
              :label="item.value"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <div @click="addAnalyse">
            <i class="iconfont icon-hao"></i>
          </div>
        </el-col>
      </el-row>
    </el-row>
    <el-row class="dimensionalityTable">
      <el-col :span="10"></el-col>
      <el-col>
        <div ref="fierstTable" :id="isShow === true ? 'firstTables' : ''"></div>
      </el-col>
    </el-row>
    <el-row
      class="dimensionalityTable"
      style=" border-top: 1px solid #dddddd; padding:0px 20px"
      v-for="(value, i) in totalTabl"
      :key="i"
    >
      <el-col v-if="true" :span="10" class="spansSelect">
        <p>分析维度：</p>
        <el-select
          v-model="mainDimensiValue['select' + i]"
          placeholder="请选择"
        >
          <el-option
            v-for="item in dimensionality"
            :key="item.value"
            :label="item.value"
            :value="item.label"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col class="tables">
        <div :ref="'main' + i"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      //人群分析下拉框
      getSelectCrowd: [],
      crowdValue: "",
      //维度分析下拉框
      dimensionality: [],
      dimensiValue: "",
      //分析维度总数据配置
      mainDimensiValue: {},
      isShow: true,
      flag: true,
      //新增维度总数居
      totalTabl: [],
      sumOpton: [],
      option: {
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            interval: 0
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#000000",
            fontSize: 12, //如果全部显示不开,可以选择字体大小
            interval: 0 //控制是否全部显示
          }
        },
        series: [
          {
            data: [],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)"
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        }
      }
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this._getSelectCrowd();
    this._getDimensionalitySelect();
  },
  mounted() {},
  methods: {
    async _getSelectCrowd() {
      const { data } = await this.$http.get(
        "http://127.0.0.1:8080/userprofile-platform/v1/UserGroup/analysis/list"
      );
      if (data.code !== 1) return;
      this.getSelectCrowd = data.data;
    },
    async _getDimensionalitySelect() {
      const { data } = await this.$http.post(
        "http://127.0.0.1:8080/userprofile-platform/v1/UserGroup/analysisDimension"
      );
      console.log(data);
      if (data.code !== 1) return;

      this.dimensionality = data.data.map((item, i) => {
        return {
          value: item,
          label: item
        };
      });
    },
    _getinfoTable(option) {
      console.log(option.config);
      echarts.init(option.ref, "light").setOption(option.config);
    },
    //增加表单的
    addAnalyse() {
      this.totalTabl.push(0);
    },
    //查询维度
    async findAnalyse() {
      const i = this.totalTabl.length - 1;
      if (
        this.crowdValue.length > 0 &&
        this.flag &&
        this.dimensiValue.length > 0 &&
        !this.mainDimensiValue["select" + i]
      ) {
        //初始的时候查询，没有点击查询按钮的值
        const params = {
          groupId: this.crowdValue,
          dimension: this.dimensiValue
        };
        console.log(params);
        const { data } = await this.$http.post(
          "http://127.0.0.1:8080/userprofile-platform/v1/UserGroup/dimension/analysis",
          params
        );
        console.log(data, "列表");
        if (data.code !== 1) return;
        this.flag = false;
        this.isShow = true;
        this.tool(data.data);
        await this._getinfoTable({
          ref: this.$refs.fierstTable,
          config: this.sumOpton[0]
        });
      } else if (
        this.mainDimensiValue["select" + i] &&
        this.crowdValue.length > 0
      ) {
        //点了添加按钮的查询
        //这里有值，那么这里一定是后面添加上的。
        this.isShow = false;
        console.log("后台添加的");
        const params = {
          groupId: this.crowdValue,
          dimension: this.mainDimensiValue["select" + i]
        };
        console.log(params);
        const { data } = await this.$http.post(
          "http://127.0.0.1:8080/userprofile-platform/v1/UserGroup/usergroupAnalysis",
          params
        );
        if (data.code !== 1) return;
        this.tool(data.data);
        await this._getinfoTable({
          ref: this.$refs["main" + i][0],
          config: this.sumOpton[i]
        });
      } else {
        console.log("你还没选择参数");
      }
    },
    tool(data) {
      let optionX = [];
      let optionY = [];
      for (const key in data) {
        optionX.push(key);
        optionY.push(data[key]);
      }
      this.option.xAxis.data = optionX;
      this.option.series[0].data = optionY;
      this.sumOpton.push(this.option);
    }
  }
};
</script>
<style scoped>
.crowd {
  min-height: 700px;
}
.headerSelect {
  display: flex;
  height: 80px;
  border-bottom: 1px solid #dddddd;
  align-items: center;
  justify-content: center;
}
.headerSelect .el-col {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 30px;
}
.headerSelect .el-col p {
  font-size: 18px;
  font-weight: 800;
}
.headerSelect .el-col button {
  width: 50px;
  height: 30px;
  border-radius: 15px;
  outline: none;
  background: none;
  border: none;
  background: #ff781b;
  color: #fff;
}
.wrapper {
  display: flex;
  flex-direction: column;
}
.dimensionality {
  display: flex;
  padding-left: 30px;
}
.dimensionality .el-col {
  display: flex;
  flex-direction: row;
  height: 80px;
  border-bottom: 1px solid #dddddd;
  align-items: center;
  justify-content: flex-start;
}
.dimensionality .el-col p {
  font-size: 18px;
  font-weight: 800;
  padding: 0px 10px;
}
.dimensionality .el-col div {
  background-color: #ff781b;
  color: #fff;
  border-radius: 50%;
}
.dimensionality .el-col div .icon-hao {
  font-size: 25px;
  font-weight: 1000;
}

.tables div {
  width: 800px;
  height: 400px;
}
#firstTables {
  width: 800px;
  height: 400px;
}
canvas {
  width: 800px;
  height: 400px;
}
.dimensionalityTable {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.dimensionalityTable .el-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 30px;
}
.dimensionalityTable .el-col p {
  font-size: 18px;
  font-weight: 800;
  padding: 0px 10px;
}
.dimensionalityTable .spansSelect {
  justify-content: flex-start;
}
</style>
